
<template>
    <div class="definitionBox">
        <search-title></search-title>
        <section class="wrap clearfix" style="position:relative">
            <p class="definitionTitle">
                <!-- <router-link to="/works/7/0/0/0/0/0/0/0/0" tag="span"  v-text="this.typeMsg[infoMsg.type]" :key="infoMsg.type">
                </router-link> -->
                 <router-link :to="{path:'/works',query:{type:7,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}" tag="span"  v-text="'高清案例'" :key="infoMsg.type">
                </router-link>
                <i v-if="infoMsg.cat_id1" ></i>
                <router-link :to="{path:'/works',query:{type:7,catid1:infoMsg.cat_id1.id,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}"  tag="span" v-if="infoMsg.cat_id1" v-text="infoMsg.cat_id1.catname" :key="infoMsg.cat_id1.id"></router-link>
                <i v-if="infoMsg.cat_id2"></i>
                <router-link :to="{path:'/works',query:{type:7,catid1:infoMsg.cat_id1.id,catid2:infoMsg.cat_id2.id,style:0,id:0,keys:0,sort:0,vip:0,page:0}}" tag="span" v-if="infoMsg.cat_id2" v-text="infoMsg.cat_id2.catname" :key="infoMsg.cat_id2.id"></router-link>
                <i v-if="infoMsg.title"></i>
                <span v-text="infoMsg.title"></span>
            </p>    
            <div class="definitionContent">
                <header class="clearfix contentTitleBox">
                    <div class="contentTitle">
                        <p>{{infoMsg.title}}</p>
                        <p class="contentTitleTime" v-if="infoMsg.cat_id1" >【{{infoMsg.cat_id1.catname}}】 
                            <span>{{infoMsg.created_at.replace(/-/g,'\\')}}</span></p>
                        <!-- <p class="contentTitleTime">发布时间： {{infoMsg.created_at}}</p> -->
                    </div>
                    <!-- <div class="contentInfo">
                        <p class="userId">
                            ID: {{infoMsg.id}}
                        </p>
                        <p class="emitIcon">
                            <span><i class="browseIcon"></i>{{infoMsg.viewnum}}</span>
                            <span><i class="downloadNum"></i>{{infoMsg.downnum}}</span>
                            <span><i class="collNum"></i>{{infoMsg.collecnum}}</span>
                        </p>
                    </div> -->
                </header>
                
                <div class="contentMsg" id="modeInfoDefinition">
                    <loading loadingStyle="height: 600px"></loading>
                    <!-- <p>
                        原案的核心以山水为形
                    </p>
                    <p>
                        将自然融入生活
                    </p>
                    <p>
                        当春风吹进客厅的时候
                    </p>
                    <p>
                        她是在迎接你走出家去享受自然给予的馈赠
                    </p>
                    <p>
                        窗外的湖光水色、耳畔鸟鸣声
                    </p>
                    <p>
                        设计一切的努力
                    </p>
                    <p>
                        都是为了提供安享生活的家
                    </p>
                    <p>
                        邱德光新作位于西南湖之畔的花语江南，卧居老城南核心，此处有花语，别处无江南。嘉兴给人的印象是步伐慢调、温柔可亲的城市。历史记载曾是文章锦绣地、温柔富贵乡、丝绸汇集市。本案的设计理念即是秉承对江南，以及嘉兴文化的理解与尊重，重现了烟雨江南，花语庭园住宅，复现风雅的东方美学生活意境。
                    </p> -->
                
                </div>
                <!-- <iframe ref="iframe" id="Iframe" src="http://tuozhe.cn/v2/share/details_new/id/1224.html" frameborder="0" width="100%" name="definitionName" onload="setIframeHeight(this)"></iframe> -->
                
            </div>
            <div class="userRight">
                <div class="rightTop">
                    <p>{{infoMsg.title}}</p>
                     <p class="upTime">
                            <span>发布时间：<i class="uploadIcon"></i>{{infoMsg.created_at}}</span>
                    </p>
                    <div class="minIconBox upTime clearfix">
                        <span><i class="browseIcon"></i>
                                {{infoMsg.viewnum}} 
                            </span> 
                        <span><i class="downloadNum"></i>
                                {{infoMsg.downnum}}
                        </span> 
                        <span><i class="collNum"></i>
                            {{infoMsg.collecnum}}
                        </span>
                        <div class="erweimaBox">
                            <div class="clearfix">
                               <span class="share"></span> 
                            </div>
                            <div class="qrcodeBox">
                                <i class="shangsan"></i>
                                <div id="qrcode" ref="qrcode">正在生成二维码，请稍后...</div>
                            </div>
                            
                        </div>
                    </div>
                </div>
                <div class="contentBtn" >
                    <button class="star" @click.prevent.stop="collection({e:$event,id:infoMsg.id,type:infoMsg.type})">
                        <!-- <i class="collNum msgColl" ></i>收藏 -->
                         <i class="collBotton" :class="{'avtiveColl':isInArray(infoMsg.id)}"></i>
                            {{isInArray(infoMsg.id)?"已收藏":"收藏"}}
                        </button>
                    <button class="down" @click="confirmDownload(infoMsg.id,infoMsg.title)"><i class="downloadNum msgDown"></i>VIP一键下载</button>
                </div>
            </div>
             
        </section>
        <rim :remInfo="rimMsg" toUrl="/modeInfoDefinition" :type="modeType"></rim>
    </div>
</template>
<script>
import searchTitle from '../searchTitle/searchTitle'
import lazy from './jquery.lazyload.js'
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
import loading from '../loading'
import QRCode from 'qrcodejs2'
import rim from './rim'

import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
    name:"modeDefinition",
    data(){
        return{
            typeMsg:["","3D模型","SU模型","施工图","概念方案","预算方案","材质贴图","高清案例"],
            infoMsg : "",
            modeType:"7",
            keyWordsMsg : '_高清设计案例下载_大师案例作品_国外设计作品',//关键词
            titleMsg : '_集设网',//描述
            descriptionMsg : " 集设网",
             rimMsg:null,//相关推荐数据
        }
    },
    components:{
        searchTitle,
        loading,
        rim
    },
    methods: {
        confirmDownload(id,title) {
            if(this.$store.state.AuthUser.userInfo){
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确认下载?</p>',
                    loading: false,
                    draggable : true,
                    scrollable:true,
                    onOk: () => {
                        this.actionDownload(id,title)
                    }
                });
            }else{
                this.loginShow();
            }
            
            
        },
         ...mapMutations(//mutations中的方法
            ["loginShow","loginClose","loginLoginName","registerLoginName","collection"]
        ),
        errorWarning() {
            var This = this;
            this.$message({
                    message: '请开通VIP后再进行下载...',
                    type: 'error',
                    customClass : 'downLoadError',
                    duration : 2000,
                    showClose : true,
                    onClose:function () {
                        let routeData = This.$router.resolve({ path: '/recharge'});
                        window.open(routeData.href, '_blank');
                    }
                });
        }, 
        actionDownload(id,name){//点击下载
                axios({
                    method: 'get',
                    url: '/downarticle/'+id,
                    // responseType: 'blob'
                }).then(response => {
                    // return;
                    if(response.data.status=="1"){
                        // window.open(this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey,"_blank"); 
                        window.location.href = this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey;
                    }else if(response.data.status=="0"){
                        this.errorWarning();
                        
                    }
            }).catch((error) => {
                this.errorWarning();
            }) 
        },
        download (data,name) {//下载要执行的函数
            if (!data) {
                return
            }
            let url = window.URL.createObjectURL(data)
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', name+'.rar')
            document.body.appendChild(link)
            link.click()
        },
        isInArray(value){
           var arr = null;
           if(!this.user.userInfo){
               return
           }else{
               
                arr = this.user.userInfo.data.articlecollects;
                
                for(var i = 0; i < arr.length; i++){
                    if(value === arr[i]){
                        return true;
                    }
                }
                return false;
           }
           
        },
         qrcode (width,height,url) {//生成二维码
            $("#qrcode").html("");
            let qrcode = new QRCode('qrcode', {
                "width": width,
                "height": height, // 高度
                "text": url, // 二维码内容
                "render": 'table'
            })
        },
        positionWheel(){
            if($(window).scrollTop()>71){
              $(".userRight").css({
                "position":'fixed',
                "top":'71px',
                "right":$('.definitionContent').offset().left+4+'px'
              })
            }else{
              $(".userRight").css({
                "position":'absolute',
                "top":"54px",
                "right":"4px"
              })
            }
        }
       
    },
    mounted(){
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
        window.addEventListener('scroll', this.positionWheel)
    },
    
    created () {
        
        axios.get('/article/'+this.$route.query.modeId+'/getinfo').then(response => {//案例详情
            this.infoMsg = response.data.data;
            
            axios.get("/nearby/"+this.modeType+"/"+this.infoMsg.cat_id2.id+'/'+this.$route.query.modeId+"/getitems").then(response => {
                this.rimMsg = response.data.data.items[this.modeType];
                
            });
            if(response.data.data.type=='1'){
                $.ajax({//案例的具体信息
                    type:"get",
                    url:"https://app.tuozhe8.com/v2/Detail/details?version=2.0&id="+response.data.data.url,
                    success:function(data){
                        $(".contentMsg").html(data.data.content);
                        $("img.lazy").lazyload({effect: "fadeIn",skip_invisible:"true"});    
                        $("img.lazy").attr("alt", response.data.data.title); 
                        var galley = document.getElementById("modeInfoDefinition");
                        var viewer = new Viewer(galley, {
                            // 相关配置项,详情参考官网
                            navbar: false,
                            url: "data-original",
                            loop: false
                        });
                    }   
                })
            }else{
                $(".contentMsg").html(response.data.data.content);
                $("img.lazy").lazyload({effect: "fadeIn",skip_invisible:"true"});
                $("img.lazy").attr("alt", response.data.data.title);
                var galley = document.getElementById("modeInfoDefinition");
                        var viewer = new Viewer(galley, {
                            // 相关配置项,详情参考官网
                            navbar: false,
                            url: "data-original",
                            loop: false
                        });
                
            }
            this.qrcode(90,90,window.location.href)
            this.keyWordsMsg = this.infoMsg.cat_id1.catname+'_高清设计案例下载_大师案例作品_国外设计作品';//关键词
            this.titleMsg  = this.infoMsg.title+'集设网';//描述
            this.descriptionMsg = this.infoMsg.title+"集设网"
        });
        
    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
    },
    updated(){
        this.$previewRefresh();//查看大图  请求回来刷新下数据
    },
    metaInfo () {
      return {
        title: this.titleMsg,
        meta: [
            {                 // set meta
                name: 'keyWords',
                content: this.keyWordsMsg
            },
            {                 // set meta
                name: 'description',
                content: this.descriptionMsg
            }
        ]
      }
    },
}
</script>
<style>
  .definitionTitle{
      height: 54px;
      /* padding-top: 10px; */
      font-size: 16px;
     line-height: 54px;
    color: #505050;
  }  
  .definitionTitle span{
      cursor:pointer;
  }
  .definitionTitle i {
    display: inline-block;
    width: 9px;
    height: 8px;
    background: url(../img/link.jpg) no-repeat center;
    padding: 0 9px;
}
  .definitionContent{
      float: left;
      width: 938px;
      border: 1px solid #eaeaea;
      background-color: #fff;
      /* margin-bottom: 196px; */
      padding-bottom: 92px;
  }
  .contentTitleBox{
      height: 111px;
      text-align: center;
      padding-top: 25px;
      border-bottom: 1px solid #dddddd;
  }
  .contentTitle{
      /* float: left; */
      font-size: 22px;
      line-height: 34px;
      color: #333333;
      font-weight: bold;
      padding-left: 26px;
  }
  .contentTitleTime{
      font-size: 16px;
      line-height: 28px;
      color: #999999;
      font-weight: normal;
      color: #ff5f5c;
  }
  .contentTitleTime span{
      color: #333333;
  }
  .contentInfo{
      float: right;
      padding-right: 35px;
  }
  .emitIcon span{
      margin-right: 10px;
  }
   .emitIcon span i{
       margin-right: 7px;
   }
   .userId{
       text-align: right;
       padding-right: 10px;
   }
   .contentMsg{
       text-align: center;
       font-size: 16px;
       line-height: 24px;
       color: #333333;
       padding: 0 18px;
   }
   .contentMsg img{
       margin: 15px 0 30px;
       width: 100%;
   }
   .definitionBox .contentBtn{
       padding-top: 51px;
       text-align: center;
       font-family: '黑体';
   }
   .definitionBox .contentBtn button{
       width: 298px;
       height: 36px;
       border-radius: 19px;
       padding: 0;
       outline: none;
       border:none;
       font-size: 18px;
       line-height: 36px;
       border: 1px solid #ff5f5c;
       /* font-family: '黑体'; */
   }
   .star{
       color: #f25954;
       background-color: #fafafa;
       border: 1px solid #ddd;
       margin-bottom: 19px;
       /* margin-right: 120px; */
   }
   .star:hover{
        background: #f1eeee;
   }
   .definitionBox .star i{
       margin-right: 0px;
   }
   .down{
       color: #fff;
       background-color: #ff5f5c;
   }
   .down:hover{
       background: #e3837f;
   }
   .down i{
       margin-right: 17px;
   }
   .downLoadError{
    margin-top: 20%;
    font-size: 50px;
}
.definitionBox .browseIcon, .definitionBox .downloadNum, .definitionBox .collNum {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: top;
    margin-left: 5px;
    margin-top: 2px;
}
.definitionBox .minIconBox{
    padding: 0;
    padding-bottom: 9px;
    border-bottom: 1px solid #eaeaea;
    position: relative;
}
.definitionBox .browseIcon {
    background: url(/images/browseNum.png) no-repeat bottom center;
}
.definitionBox .downloadNum {
    /* background: url(/images/downloadNum1.png) no-repeat bottom center!important; */
}
.definitionBox .collNum {
    margin-top: 2px;
    background: url(/images/collNum.png) no-repeat bottom center;
}
.definitionBox .msgColl{
    margin-top: 9px;
    background: url(/images/collActive.png) no-repeat top center;
}
.definitionBox .msgDown{
    margin-top: 6px;
    background: url(./img/whiteDown.png) no-repeat top center;
}
.star i{
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: top;
    margin-top: 9px;
}
.collBotton{
  background: url(./img/collBottom.png) no-repeat center!important;
}
.avtiveColl{
  background: url(./img/collActive.png) no-repeat center!important;
}
.definitionBox{
    padding-top: 71px;
}
.userRight{
    padding-top: 26px;
    width: 318px;
    height: 605px;
    border: 1px solid #eaeaea;
    border-left: none;
    background: #fafafa;
    float: left;
}
.rightTop{
    font-size: 18px;
    line-height: 24px;
    color: #333333;
    font-weight: bold;
    padding-left: 35px;
    padding-right: 20px;
    border-bottom: 1px solid #eaeaea;
}
.upTime{
    font-size: 14px;
    line-height:28px;
    color: #676767;
    font-weight: normal;
}
.share{
    float: right;
    width: 18px;
    height: 18px;
    background: url(./img/share.png) no-repeat center;
    margin-right: 0!important;
    margin-top: 5px;
}
.erweimaBox{
    position:absolute;
    right: 0;
    top: 0;
}
.erweimaBox:hover .share{
    
    background: url(./img/hoverShare.png) no-repeat center;
}
.erweimaBox:hover>.qrcodeBox{
    display:block;
}
.qrcodeBox{
    margin-top: 7px;
    margin-right: -20px;
    width: 108px;
    height: 108px;
    padding: 8px;
    background: #fff;
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
    display:none;
}
.shangsan{
    position: absolute;
    top:25px;
    left: 72px;
    width: 12px;
    height: 5px;
    background: url(./img/shangsan.png) no-repeat center;
}
</style>